<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/ui/base/dom_helpers.html">
<link rel="import" href="/tracing/ui/base/ui.html">

<dom-module id='tr-ui-b-info-bar'>
  <template>
    <style>
    :host {
      align-items: center;
      flex: 0 0 auto;
      background-color: rgb(252, 235, 162);
      border-bottom: 1px solid #A3A3A3;
      border-left: 1px solid white;
      border-right: 1px solid #A3A3A3;
      border-top: 1px solid white;
      display: flex;
      min-height: 26px;
      padding: 0 3px 0 3px;
    }

    :host([hidden]) {
      display: none !important;
    }

    #message { flex: 1 1 auto; }
    </style>

    <span id='message'></span>
    <span id='buttons'></span>
  </template>
</dom-module>
<script>
'use strict';

Polymer({
  is: 'tr-ui-b-info-bar',

  ready() {
    this.messageEl_ = this.$.message;
    this.buttonsEl_ = this.$.buttons;

    this.message = '';
  },

  get message() {
    return Polymer.dom(this.messageEl_).textContent;
  },

  set message(message) {
    Polymer.dom(this.messageEl_).textContent = message;
  },

  get visible() {
    return !this.hidden;
  },

  set visible(visible) {
    this.hidden = !visible;
  },

  removeAllButtons() {
    Polymer.dom(this.buttonsEl_).textContent = '';
  },

  addButton(text, clickCallback) {
    const button = document.createElement('button');
    Polymer.dom(button).textContent = text;
    button.addEventListener('click', event => clickCallback(event, this));
    Polymer.dom(this.buttonsEl_).appendChild(button);
    return button;
  }
});
</script>
